<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>物联网搜索</title>
<link rel="stylesheet" type="text/css" href="../../static/css/sxl/search.css" />
	<link rel="stylesheet" type="text/css" href="../../static/bootstrap-3.3.7/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../../static/bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css"/>

	<script type="text/javascript" src="../../static/js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="../../static/bootstrap-3.3.7/js/bootstrap.js"></script>
	<script type="text/javascript" src="../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.zh-CN.js" ></script>
	<script type="text/javascript" src="../../static/bootstrap-3.3.7/js/moment-with-locales.js" ></script>
	<script type="text/javascript" src="../../static/bootstrap-3.3.7/js/bootstrap-slider.min.js" ></script>
	<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script type="text/javascript" src="../../static/js/utils/CommonUtils.js"></script>

</head>
<script type="text/javascript">
	//发送请求
	function submitGet() {
		var text = $("#searchText").val();
		$.ajax({
			type : "get",
			url : "http://localhost/consumer/SearchInfoAPI/getSearchData?queryString=" + text,
			success : function(msg) {
				$("#searchTitle").removeClass("searchDisplay").addClass("searchHide");
				$("#searchNav").removeClass("searchHide").addClass("searchDisplay");
				$("#searchBody").removeClass("searchHide").addClass("searchDisplay");

				$("#searchInput").css('marginLeft', 0);
				$("#searchInput").css('zIndex', 9999);
				//移动搜索框的位置
				//var json = {"width": 700, "left": 110, "top": 8, "opacity": 1};
				//shift(my$("searchInput"), json);
				//使用jquery实现自定义动画
				//第一个参数:动画的样式
				//第二个参数:动画的执行时间
				//第三个参数:动画的执行效果
				$("#searchInput").animate({
					left : 110,
					top : 8,
					width : 700,
					opacity : 1
				}, 500, "swing");

				var length = msg.data.list.length;
				let data = msg.data.list;
				var item = "";
				$("#serachContent").html();
				for (var i = 0; i < length; i++) {
					item = item + '<div class="list-group-item" style="border: 0;">' +
						'<a href="" style="color: #0F0F0F;"><h4>' + data[i].primarykey + '</h4></a>' +
						'<p>' + data[i].itemcontent1 + data[i].itemcontent2 + data[i].itemcontent3 + data[i].itemcontent4 + '</p>' +
						'<p><span class="kz">www.w3school.com.cn/jq...</span>&nbsp;' +
						'<span>星光快照</span>' +
						'</p>' +
						'<div style="border-bottom: 1px dashed #ccc;"></div>' +
						'</div>';
				}
				$("#serachContent").append(item);
			},
			error : function(e) {
				alert("网页发生错误：", e, "error");
			}
		});
	}

	$(function() {
		//将光标定位在文本框
		$('#searchText').focus();
		//点击星du按钮出发查询
		$("#searchSubmit").click(function() {
			/*alert("点击了提交");*/
			submitGet();
		});
		//回车出发查询
		$(document).keyup(function(evnet) {
			if (evnet.keyCode == '13') {
				submitGet();
			}
		});
	})
</script>
<body>
	<div id="backG">

		<div class="searchDisplay" id="searchTitle">
			<span style="color: red;">物联网</span> <span style="color: blue;">★</span> <span style="color: red;">搜索</span>
		</div>

		<div id="searchInput" style="margin-left: -250px;position: fixed;left: 50%;">
			<input id="searchText" type="text" />
			<input id="searchSubmit" type="submit" value="搜索" />
		</div>
	</div>

	<!--导航栏-->
	<div class="nav navbar-default navbar-fixed-top searchHide" role="navigation" id="searchNav">
		<div style="text-align: left">
			<img src="../../static/images/searchInfo-logo.png" style="height: 55px;width: 110px" />
		</div>
	</div>

	<div style="height: 70px;"></div>

	<div class="container searchHide" id="searchBody">
		<!--列表页-->
		<div class="row">
			<div class="col-md-8">

				<div class="list-group" id="serachContent">

					<div class="list-group-item" style="border: 0;">
						<a href="" style="color: #0F0F0F;"><h4>Web App 和 Native App,哪个是趋势?</h4></a>
						<p></p>
						<p>
							<span>www.w3school.com.cn/jq...</span>&nbsp;<span>星光快照</span>
						</p>
						<div style="border-bottom: 1px dashed #ccc;"></div>
					</div>

				</div>

				<div class="text-center">
					<ul class="pagination">
						<li><a href="">&laquo;</a></li>
						<li><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li><a href="">4</a></li>
						<li><a href="">5</a></li>
						<li><a href="">&raquo;</a></li>
					</ul>
				</div>
			</div>




			<!--侧边栏(广告部分)-->
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<strong>热点信息</strong><small class="pull-right"><a href="" class="text-muted">更多</a></small>
					</div>
					<div class="panel-body">
						<h4>
							<strong class="panel-title">职教“供给侧”改革</strong>
						</h4>
						<p>邢帅教育联合创始人郭洪仓称,在对全国市场进行深入调研后,邢帅教育计划今年在全国建1000家分校服务5000万人,3年后达到3000家左右分校服务3亿人群。</p>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<strong>热点信息</strong><small class="pull-right"><a href="" class="text-muted">更多</a></small>
					</div>
					<ul class="list-group">
						<li class="list-group-item" style="border: 0;"><a class="text-muted" href="">直播火:“教育+直播”会更火</a></li>
						<li class="list-group-item" style="border: 0;"><a class="text-muted" href="">直播火:“教育+直播”会更火</a></li>
						<li class="list-group-item" style="border: 0;"><a class="text-muted" href="">直播火:“教育+直播”会更火</a></li>
					</ul>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<strong>热点信息</strong><small class="pull-right"><a href="" class="text-muted">更多</a></small>
					</div>
					<ul class="list-group media-list">
						<li class="list-group-item">
							<div class="media">
								<div class="media-left">
									<img src="../../static/images/searchInfo-ad.jpg" />
								</div>
								<div class="media-body">
									<h5 class="media-heading">
										<strong>邢帅教育亿元扶贫计划</strong>
									</h5>
									<p>在对全国市场进行深入调研后,邢帅教育计划今年在全国建1000家分校服务5000万人,3年后达到3000家左右分校服务3亿人群。</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>

	</div>
</body>
</html>
